<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0c1e089;
            padding: 20px;
        }


        h1 {
            text-align: center; /* 使标题居中 */
            color: #343a40;
            margin-bottom: 30px;
        }


        .container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            
        }


        .column {
            width: 48%;
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            background-color: #f1ebf1;
        }


        label {
            font-weight: bold;
            display: block;
            margin-top: 15px;
        }


        input[type="number"],
        input[type="text"],
        select {
            width: calc(100% - 22px); /* Full width minus padding and border */
            margin-top: 5px;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 5px;
        }


        .result {
            background-color: #fbf6f6;


        }


        .unit {
            display: inline-block;
            margin-left: 10px;
            font-size: 0.9em;
            color: #6c757d;
        }


        .buttons {
            text-align: center;
            margin-top: 20px;
        }


        button {
            margin: 5px;
            padding: 10px 20px;
            background-color: #f4b1d7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
        }


        button:hover {
            background-color: #f0c1e0;
        }
    </style>
</head>


<body>
    <h1>房贷公积金贷款商贷组合贷款计算器</h1>
    <div class="container">
        <div class="column">
            <h2>房贷信息</h2>
            <label>贷款类别</label>
            <select id="loanType">
                <option>商业贷款</option>
                <option>公积金贷款</option>
            </select>
            <label>还款方式</label>
            <select id="repaymentMethod">
                <option>等额本息</option>
                <option>等额本金</option>
            </select>
            <label>计算方式</label>
            <select id="calculationMethod">
                <option>根据按揭成数计算</option>
            </select>
            <label>房屋总价</label>
            <input type="number" id="housePrice" placeholder="万元">
            
            <label>按揭成数</label>
            <select id="mortgageFraction">
                <option value="0.7">7成</option>
                <option value="0.8">8成</option>
            </select>
            <label>按揭年数</label>
            <select id="loanYears">
                <option value="20">20年 (240期)</option>
                <option value="30">30年 (360期)</option>
            </select>
            <label>商贷利率</label>
            <input type="number" id="annualInterestRate" placeholder="%" step="0.01">
        </div>
        <div class="column result">
            <h2>计算结果</h2>
            <label>房款总额：</label>
            <input type="text" id="totalPrice" readonly>
            <span class="unit">万元</span>
            <label>首 付 款：</label>
            <input type="text" id="downPayment" readonly>
            <span class="unit">万元</span>
            <label>贷款总额：</label>
            <input type="text" id="loanAmount" readonly>
            <span class="unit">万元</span>
            <label>还款总额：</label>
            <input type="text" id="totalRepayment" readonly>
            <span class="unit">万元</span>
            <label>支付利息：</label>
            <input type="text" id="totalInterest" readonly>
            <span class="unit">万元</span>
            <label>贷款月数：</label>
            <input type="text" id="totalMonths" readonly>
            <label>月均还款：</label>
            <input type="text" id="monthlyRepayment" readonly>
            <span class="unit">元</span>
        </div>
    </div>
    <div class="buttons">
        <button onclick="calculateLoan()">房贷计算</button>
        <button onclick="resetForm()">清空重填</button>
    </div>
    <script>
        function calculateLoan() {
            // 获取用户输入的值
            const housePrice = parseFloat(document.getElementById('housePrice').value) * 10000;
            const mortgageFraction = parseFloat(document.getElementById('mortgageFraction').value);
            const loanYears = parseInt(document.getElementById('loanYears').value);
            const annualInterestRate = parseFloat(document.getElementById('annualInterestRate').value) / 100;
            // 计算首付
            const downPayment = housePrice * (1 - mortgageFraction);
            // 计算贷款总额
            const loanAmount = housePrice * mortgageFraction;
            // 计算每月利率
            const monthlyInterestRate = annualInterestRate / 12;
            // 计算还款总月数
            const numberOfPayments = loanYears * 12;
            // 计算每月还款额（这里以等额本息为例）
            let monthlyPayment;
            if (monthlyInterestRate === 0) {
                monthlyPayment = loanAmount / numberOfPayments;
            } else {
                monthlyPayment = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -numberOfPayments));
            }
            // 计算还款总额
            const totalRepayment = monthlyPayment * numberOfPayments;
            // 计算支付利息
            const totalInterest = totalRepayment - loanAmount;
            // 显示结果
            document.getElementById('totalPrice').value = (housePrice / 10000).toFixed(2);
            document.getElementById('downPayment').value = (downPayment / 10000).toFixed(2);
            document.getElementById('loanAmount').value = (loanAmount / 10000).toFixed(2);
            document.getElementById('totalRepayment').value = (totalRepayment / 10000).toFixed(2);
            document.getElementById('totalInterest').value = (totalInterest / 10000).toFixed(2);
            document.getElementById('totalMonths').value = numberOfPayments + " 个月";
            document.getElementById('monthlyRepayment').value = monthlyPayment.toFixed(2);
        }


        function resetForm() {
            document.getElementById('housePrice').value = '';
            document.getElementById('annualInterestRate').value = '';
            document.querySelectorAll('.result input').forEach(input => input.value = '');
        }
    </script>
</body>


</html>
